<template>
  <div class="notes">
    <div class="top">
      <div class="left">
        <p>You have written <span>{{ blogs.length }}</span> blogs</p>
      </div>
      <div class="right">     
        <el-button size="large" type="primary" :icon="Edit" round @click="openAddDrawer()">Write Blogs</el-button>
      </div>
    </div>
    <div class="content">
      <ul>
        <li v-for=" blog in blogs" :key="blog.id" @click="$router.push(`/blog/detail/${blog.id}`)">
          <div class="img">
            <img :src="blog.cover" alt="">
            <span><button class="del-btn" @click="del($event, blog.id)">Delete</button></span>
            <span><button @click="openEditDrawer($event, blog)">Update✍</button></span>
          </div>
          <div class="info">
            <div class="title">
              <h4>{{ blog.title }}</h4>
            </div>
            <div class="time">{{ formatTime(blog.createTime) }}</div>
            <div class="intro ellipsis" v-html="blog.content">
            </div>
          </div>
        </li>
      </ul>
    </div>


    <div class="blogForm">
      <el-drawer
          v-model="drawerVisible"
          :title="blogForm.id ? 'Update' : 'Add'"
          direction="rtl"
          :before-close="handleClose"
          size="50%"
        >
        <el-form :model="blogForm" label-width="100px">
          <el-form-item label="Blog Title" prop="title">
            <el-input v-model="blogForm.title" placeholder="please input title"></el-input>
          </el-form-item>
          <el-form-item label="Blog Cover" prop="cover">
            <FileUpload :imgUrl="blogForm.cover" @FileUpload="handleCoverUpdate"></FileUpload>
          </el-form-item>
          <el-form-item label="Content" prop="content">
            <div class="editor">
              <quill-editor
                  toolbar="full"
                  theme="snow"
                  v-model:content="blogForm.content"
                  contentType="html"
                  ref="editorRef"
                  style="height: 500px"
              >
              </quill-editor>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click=" blogForm.id ? update() : addBlog()">
              {{ blogForm.id ? 'Update' : 'Add'}}
            </el-button>
            <el-button type="info">Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import { blogAddService, blogDeleteByIdService, blogGetByAuthorNameService, blogUpdateService } from "@/api/blog";
import { formatTime } from "@/utils/format";
import { Edit } from "@element-plus/icons-vue";
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { onMounted, ref } from 'vue';
const blogs = ref([])

async function getUserBlogs(){
  const res = await blogGetByAuthorNameService()
  blogs.value = res.data.data
}

onMounted( ()=>{
  getUserBlogs()
})


const drawerVisible = ref(false)
const blogForm = ref({
  title:'',
  cover:'',
  content:''
})
async function handleClose() {
  await ElMessageBox.confirm('Are you sure to close?', 'Warning', {
    type: 'warning',
    confirmButtonText: 'Yes',
    cancelButtonText: 'No'
  });
  drawerVisible.value = false
}
function handleCoverUpdate(newCover){
  blogForm.value.cover = newCover
}
const editorRef = ref()
function openAddDrawer(){
  drawerVisible.value = true
  blogForm.value = {}
  editorRef.value.setHTML('')
}
async function addBlog(){
  await blogAddService(blogForm.value)
  drawerVisible.value = false
  getUserBlogs()
  ElMessage.success("Successfully write a blog")
}


function openEditDrawer(event,blog){
  event.stopPropagation();// Avoid going to the detail page of blog when click the edit button
  blogForm.value = {...blog}
  drawerVisible.value = true
}

async function update(){
  await blogUpdateService(blogForm.value)
  ElMessage.success('Update the blog successfully')
  drawerVisible.value = false
  getUserBlogs()
}

async function del(event,blogId){
  event.stopPropagation();// Avoid going to the detail page of blog when click the delete button
  await ElMessageBox.confirm('Are you sure to delete this blog?', 'Warning', {
    type: 'warning',
    confirmButtonText: 'Yes',
    cancelButtonText: 'No'
  });
  await blogDeleteByIdService(blogId);
  getUserBlogs()
  ElMessage.success('Delete a blog successfully')
}


</script>

<style scoped lang="less">
.notes {
  width: 105%;
  .top {
    display: flex;
    width: 100%;
    height: 60px;
    padding: 10px;
    margin-bottom: 20px;
    border-bottom: skyblue 2px solid;

    .left {
      line-height: 40px;
      color: grey;
      span {
        color: #08ade6;
        font-size: 17px;
        font-weight: 700;
      }
    }

    .right {
      margin-left: 560px;
    }
  }


  .content {
    ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      li {
        cursor: pointer;
        box-shadow: 0 0 5px rgb(166, 165, 165);
        border-radius: 5px;

        width: 420px;
        height: 300px;
        margin-bottom: 20px;

        .img {
          position: relative;
          height: 170px;
          width: 100%;
          border-radius: 5px 5px 0 0;

          img {
            object-fit: cover;
            border-radius: 5px 5px 0 0;
          }

          span {
            position: absolute;
            top: 10px;
            right: 10px;
            box-shadow: 0 0 10px grey;
            border-radius: 50%;
          }
          span:nth-child(2) {
            position: absolute;
            top: 50px;
            right: 10px;
            box-shadow: 0 0 10px grey;
            border-radius: 50%;
          }

          button {
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: orange;
            color: white;
          }

          .del-btn {
            background-color: red;
          }

          button:hover {
            cursor: pointer;
            background-color: rgb(255, 173, 159);
          }
        }

        .info {
          padding: 5px;

          .title {
            display: flex;
            justify-content: space-between;
            color: #409eff;
            height: 30px;
            line-height: 30px;
            margin-bottom: 3px;
            overflow-y: hidden;

            p {
              font-size: 13px;
            }
          }

          .time {
            font-size: 12px;
            color: grey;
            font-weight: 100;
            margin-bottom: 5px;
          }

          .intro {
            font-size: 15px;
            color: #666666;
          }

        }

        .ellipsis {
          -webkit-line-clamp: 3;
        }
      }
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}


</style>